Fix black band under phone content when iOS Safari toolbar collapses#732
Conversation
Size the fixed phone shell and fullscreen overlays from their inset-0 containers instead of 100dvh. iOS Safari re-resolves dvh lazily while its bottom toolbar collapses/expands (especially with body scrolling disabled), so the dvh-sized shell kept its stale shorter height and clipped content, leaving a dead black band above the toolbar. Fixed insets track the live viewport through the whole transition, so content now fills the screen edge to edge. Same dvh -> full swap applied to the fullscreen Sheet variant, the left drawer, the settings dialog, and the fullscreen scope sheet, which shared the identical hazard. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01CkCda13HLjNhg7oDycmoSh
|
This pull request has been ignored for the connected project Preview Branches by Supabase. |
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (4)
📝 WalkthroughWalkthroughMobile search shells, sheets, and dialogs replace dynamic viewport-height sizing with fixed inset tracking or full-container height constraints to handle mobile toolbar transitions. ChangesMobile viewport sizing
Estimated code review effort: 2 (Simple) | ~10 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Capture merge-readiness outcomes for the screenshot PR queue and keep the historical ledger out of Prettier realignment. Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Capture merge-readiness outcomes for the screenshot PR queue and keep the historical ledger out of Prettier realignment. Co-authored-by: Cursor Agent <cursoragent@cursor.com> Co-authored-by: BigSimmo <BigSimmo@users.noreply.github.com>
Summary
position: fixed; inset: 0box that also forcedheight: 100dvh— kept a staledvhheight (iOS resolvesdvhlazily, especially with body scrolling disabled) and itsoverflow-hiddenclipped everything below it.max-sm:inset-0, noh-dvh; inner columnmax-sm:h-full). Fixed insets track Safari's live viewport through the whole toolbar transition, so content now fills the screen edge to edge and shows through under the minimized glass bar (viewport-fit=coverwas already set).dvh → fullswap to the other phone-fullscreen surfaces that shared the hazard: the fullscreenSheetvariant, the left drawer, the settings dialog, and the fullscreen document-scope sheet. Each already sits inside afixed inset-0backdrop, so percentage sizing resolves against the live viewport. Desktop (sm:/lg:) sizing is unchanged.Verification
npm run typecheck— 0 errorsnpm run lint— cleannpm run test— 2681 passed; the single failure (tests/pdf-extraction-budget.test.tschild-process kill) fails identically on a clean tree in this container (sandbox signal limitation), pre-existingnpm run verify:ui— 216/217 passed. The one failure (ui-smoke.spec.ts› document viewer PDF canvas on mobile) reproduces identically on the base commit without this change in the same container (pdf.js canvas does not render under the container's substituted Chromium headless-shell build), so it is environment-caused and not a regression of this diff; the failure screenshot shows the surrounding shell/layout rendering correctlynpm run verify:pr-localnot run: lint, typecheck, unit suite, and the UI gate were run individually; no RAG fixture/manifest surface toucheddvhbehavior itself only reproduces on iOS Safari hardware during toolbar collapse, which local Chromium cannot simulate — please confirm on-device that content now fills the space when the bottom bar hidesRisk and rollout
100dvhunit to its already-presentinset-0/definite-height parent, which computes the same value whendvhis freshClinical Governance Preflight
Presentation-layer sizing change only; every invariant below is untouched by the diff and still holds.
Clinical KB Database(sjrfecxgysukkwxsowpy)Notes
cnis a plain join (no tailwind-merge), so the fullscreen scope sheet'scontentClassNamewas switched tomax-h-fullin the same commit to keep it identical to the newSheetfullscreen base class and avoid an order-dependentmax-hconflict.🤖 Generated with Claude Code
https://claude.ai/code/session_01CkCda13HLjNhg7oDycmoSh
Summary by CodeRabbit